<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div>
                    <svg class="icon ico1" aria-hidden="true">
                        <use xlink:href="#icon-shujujianguan"></use>
                    </svg>
                    <span>经营数据</span>
                </div>
                <div>
                    <span>选择日期：</span>
                    <el-date-picker
                        v-model="date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
            <div>
                <el-row :gutter="80">
                    <el-col :span="24" :xs="12" :sm="12" :lg="6" v-for="list in listArr" :key="list.path">
                        <div class="grid-content">
                            <div class="info">
                                <p>{{list.title}}</p>
                                <p>{{ list.count }}</p>
                            </div>
                            <div class="ico">
                                <svg class="icon" aria-hidden="true">
                                    <use :xlink:href="list.path"></use>
                                </svg>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>

        <el-row :gutter="20">
            <el-col :span="24" :md="6">
                <el-card class="box-card">
                    <div slot="header">
                        <svg class="icon ico1" aria-hidden="true">
                            <use xlink:href="#icon-shujujianguan"></use>
                        </svg>
                        <span>订单统计</span>
                    </div>
                    <div id="order" style="width: 100%;height:100%;"></div>
                </el-card>
            </el-col>
            <el-col :span="24" :md="6">
                <el-card class="box-card">
                    <div slot="header">
                        <svg class="icon ico1" aria-hidden="true">
                            <use xlink:href="#icon-shujujianguan"></use>
                        </svg>
                        <span>救援任务统计</span>
                    </div>
                    <div id="rescue" style="width: 100%;height:100%;"></div>
                </el-card>
            </el-col>
            <el-col :span="24" :md="12">
                <el-card class="box-card">
                    <div slot="header">
                        <svg class="icon ico1" aria-hidden="true">
                            <use xlink:href="#icon-shujujianguan"></use>
                        </svg>
                        <span>用户情况</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8" v-for="user in userInfo" :key="user.title">
                            <div class="userInfo">
                                <div>
                                    <span>{{ user.title }}</span>
                                    <svg class="icon wenhao" aria-hidden="true">
                                        <use xlink:href="#icon-wenhao"></use>
                                    </svg>
                                </div>
                                <span>{{ user.number }}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <!-- 注册用户分析图标 -->
        <div class="userAnalyse">
            <span>用户注册分析</span>
            <div id="userAnalyse" style="width: 100%;height:100%;"></div>
        </div>
    </div>
</template>

<script>
import { dash1,dash2,dash3,dash4 } from '../../api/index';
export default {
    name:'Dashboard',
    mounted(){
        // 初始化echarts图标
        this.init();
        // 实现echarts图标响应式
        window.onresize=()=>{
            for(let key in this.chartArr){
                this.chartArr[key].resize();
            }
        }
        // 经营数据请求
        dash1(this.date).then(r=>{
            // console.log('dash1',r);
            var data = r.data;
            this.listArr[0].count = data.orderData || 0;
            this.listArr[1].count = data.orderSum || 0;
            this.listArr[2].count = data.userSum || 0;
            this.listArr[3].count = data.businessSum || 0;
        })
        // 救援请求
        dash2(this.date).then(r=>{
            // console.log(r);
            var data = r.data;
            this.rescueArr[0].value = data.processed;
            this.rescueArr[1].value = data.unprocessed;
            // rescueArr数据改变重新渲染
            let option = this.chartArr[0].getOption();
            option.series[0].data = this.rescueArr;
            this.chartArr[0].setOption(option,true);
        }),
        // 订单统计请求
        dash3(this.date).then(r=>{
            // console.log(r);
            var data = r.data;
            this.orderArr.forEach((item,index)=>{
                item.value = parseInt(data[index].orderCount);
            })
            // orderArr数据改变重新渲染
            let option = this.chartArr[1].getOption();
            option.series[0].data = this.orderArr;
            this.chartArr[1].setOption(option,true);
        })
        // 用户注册分析
        dash4(this.date).then(r=>{
            console.log(r);
            // date代表该天是几号
            var data = r.data;
            data.forEach((item,index)=>{
                let d = item.date.split(' ')[0].split('-')[2];
                this.$set(this.dateArr,index,d>10?d+'号':d.split('')[1]+'号');
                this.$set(this.dateInfoArr,index,item.count);
            })
            // orderArr数据改变重新渲染
            let option = this.chartArr[2].getOption();
            option.series[0].data = this.dateInfoArr;
            option.xAxis[0].data = this.dateArr;
            this.chartArr[2].setOption(option,true);
        })
    },
    data(){
        return{
            date:"",
            listArr:[
                {path:'#icon-chongzhi',count:null,title:'今日订单总额（元）'},
                {path:'#icon-zongshu',count:null,title:'今日订单总数'},
                {path:'#icon-yonghu',count:null,title:'今日新增用户数'},
                {path:'#icon-yonghukaihu',count:null,title:'今日新增商户'}
            ],
            userInfo:[
                {title:'商户数',number:100},
                {title:'新增用户数',number:50},
                {title:'累计用户数',number:1000}
            ],
            chartArr:[],
            orderArr:[
                { value: null, name: '汽车类' },
                { value: null, name: '保养类' },
                { value: null, name: '维修类' }
            ],
            rescueArr:[
                { value: null, name: '已处理' },
                { value: null, name: '待处理' }
            ],
            // 用户注册分析数据
            dateArr:[],
            dateInfoArr:[]
        }
    },
    methods:{
        // 初始化echarts图表
        init(){
            this.chartArr[0] = this.$echarts.init(rescue);
            this.chartArr[1] = this.$echarts.init(order);
            this.chartArr[2] = this.$echarts.init(userAnalyse);
            this.chartArr[0].setOption({
                tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '20%',
                right:'5%',
                orient :'vertical'
            },
            color:[ '#72CDD7','red'],
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: ['100%', '70%'],
                center:['30%','50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: this.rescueArr
                }
            ]
        })
            this.chartArr[1].setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right:'5%',
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['100%', '70%'],
                     center:['30%','50%'],
                    label: {
                    show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: this.orderArr
                    }
                ]
            })
            this.chartArr[2].setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    data: this.dateArr,
                    axisTick: {
                        alignWithLabel: true
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                color:['#5087EC'],
                series: [
                    {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: this.dateInfoArr
                    }
                ]
            })
        }
    }
}
</script>

<style scoped>
.box-card{
    margin-bottom: 20px;
}
.ico1{
    color: #68BBC4;
    font-size: 22px;
    margin-right: 8px;
}
.clearfix{
    display: flex;
    justify-content: space-between;
}
.ico{
    font-size: 30px;
    color: white;
}
.grid-content{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
    padding: 30px 10px 20px 15px;
}
.el-row .el-col:nth-of-type(1) .grid-content{
    background-color: #34CC5F;
}
.el-row .el-col:nth-of-type(2) .grid-content{
    background-color: #9150E8;
}
.el-row .el-col:nth-of-type(3) .grid-content{
    background-color: #458EFD;
}
.el-row .el-col:nth-of-type(4) .grid-content{
    background-color: #FF7823;
}
.grid-content .info p{
    margin-bottom: 15px;
    color: white;
}
.grid-content .info p:nth-child(1){
    font-size: 14px;
}
.userInfo{
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 15px;
}
.userInfo > div{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.userInfo > div span{
    font-size: 13px;
}
.userInfo > span{
    font-weight: bold;
    font-size: 20px;
}
.wenhao{
    color: #C8C9CC;
}
.userAnalyse{
    border: 1px solid #ccc;
    background-color: #FFFFFF;
    height: 250px;
    display: flex;

}
.userAnalyse > span{
    display: inline-block;
    width: 20px;
    height: 150px;
    line-height: 25px;
    padding-left: 20px;
    margin-right: 50px;
    font-size: 12px;
    align-self: center;
    border-right: 1px solid #ccc;
}
</style>